<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Reddit URL Recommendation</title>
		<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
		<style>
			section {
				margin-top: 30px;
			}
                        .showTable {
				width: 60%;
				float: left; 
                        }
                        .showTable table {
                                table-layout: fixed;
                                word-wrap: break-word;
                        }
                        .showChart {
                                width: 35%;
				float: right; 
                        }
                        h4 {
				margin-bottom: 35px;
                        }
    
		</style>

                <style>
                .node {
                  stroke: #fff;
                  stroke-width: 1.5px;
                }
                
                .link {
                  fill: none;
                  stroke: #bbb;
                }
                </style>

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  		<script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>
                <script src={{ url_for('static', filename='d3.min.js')}}></script>

	</head>
	<body>
		<div class="container">
			<h1>Hottest Topic on Reddit</h1>
			<h3>Real Time Reddit News Feed For User "{{user}}"</h3>
			<section class="showTable">
				<p>Some of people are commenting on these topics you may be interested in:</p>
				<table class="table table-striped">
					<thead>
						<tr>
							<th>URL</th>
							<th>Title</th>
							<th>By User</th>
						</tr>
					</thead>
					<tbody>
						{% for row in json_data %}
						<tr>
							<td>{{row.URL}}</td>
							<td>{{row.title}}</td>
							<td>{{row.otherUser}}</td>
						</tr>
						{% endfor %}
						
					</tbody>
				</table>
			</section>
			<section class="showChart" id="showGraph">
			<h4>Relationship Graph for "{{user}}" (In Blue, Center)</h4>
			</section>
		</div>
	<script>

        var width = 400,
            height = 400;
        
        var color = d3.scale.category20();
        
        var force = d3.layout.force()
            .linkDistance(10)
            .linkStrength(2)
            .size([width, height]);
        
        var svg = d3.select("#showGraph").append("svg")
            .attr("width", width)
            .attr("height", height);
        
        var graph = {{graph_data | tojson}};
        //console.log('valueof', {{graph_data | tojson}});
        
        var nodes = graph.nodes.slice(),
            links = [],
            bilinks = [];
        
        graph.links.forEach(function(link) {
          var s = nodes[link.source],
              t = nodes[link.target],
              i = {}; // intermediate node
          nodes.push(i);
          links.push({source: s, target: i}, {source: i, target: t});
          bilinks.push([s, i, t]);
        });
        
        force
            .nodes(nodes)
            .links(links)
            .start();
        
        var link = svg.selectAll(".link")
            .data(bilinks)
            .enter().append("path")
            .attr("class", "link");
        
        var node = svg.selectAll(".node")
            .data(graph.nodes)
            .enter().append("circle")
            .attr("class", "node")
            .attr("r", 5)
            .style("fill", function(d) { return color(d.group); })
            .call(force.drag);
        
        node.append("title")
            .text(function(d) { return d.name; });
        
        force.on("tick", function() {
          link.attr("d", function(d) {
            return "M" + d[0].x + "," + d[0].y
                + "S" + d[1].x + "," + d[1].y
                + " " + d[2].x + "," + d[2].y;
          });
          node.attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
          });
        });
        
        </script>	
	</body>
</html>
